<template>
	<div>

		<el-input v-model="cc" maxlength="10" placeholder="Please input" show-word-limit type="text" />

		<el-button @click="openInputBoxes">打开输入框</el-button>
	</div>
</template>  
	
<script>
export default {
	data() {
		return {
			cc: '',
			cc2: ''
		}
	},
	methods: {
		// https://www.cnblogs.com/rachelch/p/17372236.html
		openInputBoxes() {
			const messageBox = ElementPlus.ElMessageBox({
				title: '输入框',
				message: Vue.h('div', null, [
					Vue.h(ElementPlus.ElInput, {
						placeholder: '请输入内容1',
						modelValue: this.cc,
						// 'v-model': 'cc2',
						'onUpdate:modelValue': (value) => {
							console.log("updateValue cc :", value)
							this.cc = value;
						},
					}),
					Vue.h(ElementPlus.ElInput, {
						placeholder: '请输入内容2',
						modelValue: this.cc2,
						// 'v-model': 'cc2',
						'onUpdate:modelValue': (value) => {
							console.log("updateValue cc2 : ", value)
							this.cc2 = value;
						},
					}),
				]),
				showCancelButton: true,
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel',
				beforeClose: (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true
						instance.confirmButtonText = 'Loading...'
						setTimeout(() => {
							done()
							setTimeout(() => {
								instance.confirmButtonLoading = false
							}, 300)
						}, 3000)
					} else {
						done()
					}
				},
			}).then((action) => {
				console.log("openInputBoxes:", action)
				ElMessage({
					type: 'info',
					message: `action: ${action}`,
				})
			})
		},
	},
};
</script>